<template>
  <div class="login-container">

    <div class="login" :style="{ width: loginWidth }">
      <h2 style="text-align: center">知识问答库</h2>
<!--      <el-tabs v-model="selectedTab" class="tabs">-->
<!--        <el-tab-pane label="用户名登录" name="username">-->
          <el-form label-width="60px">
            <el-form-item label="用户名" style="margin-bottom: 20px;margin-top: 20px">
              <el-input v-model="username" placeholder="请输入用户名或邮箱"></el-input>
            </el-form-item>
            <el-form-item label="密码" style="margin-bottom: 20px">
              <el-input type="password" v-model="password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>

            </el-form-item>
          </el-form>
          <el-button type="primary" @click="loginWithUsername">登录</el-button>
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="邮箱登录" name="email">-->
<!--          <el-form label-width="80px">-->
<!--            <el-row>-->
<!--              <el-col>-->
<!--                <el-form-item label="邮箱">-->
<!--                  <el-input v-model="email" placeholder="请输入邮箱"></el-input>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col>-->
<!--                <el-form-item label="验证码">-->
<!--                  <el-col :span="16">-->
<!--                    <el-input v-model="verificationCode" placeholder="请输入验证码"></el-input>-->
<!--                  </el-col>-->

<!--                  <el-col :span="6" :offset="2">-->
<!--                    <el-button :disabled="isCountingDown" @click="startCountdown" type="primary">{{-->
<!--                        countdownText-->
<!--                      }}-->
<!--                    </el-button>-->
<!--                  </el-col>-->

<!--                </el-form-item>-->

<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-form-item>-->

<!--            </el-form-item>-->
<!--          </el-form>-->
<!--          <el-button type="primary" @click="loginWithEmail">登录</el-button>-->
<!--        </el-tab-pane>-->

<!--      </el-tabs>-->
<!--      <el-row style="height: 25px">-->
<!--        <el-col :span="3" offset="20">-->
<!--          <el-button type="text" @click="toforgetpassword">忘记密码</el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </div>
  </div>
</template>

<script>



import myaxios from "../config/myaxios";

export default {
  components: {},
  data() {
    return {
      selectedTab: 'username',
      username: '',
      password: '',
      email: '',
      verificationCode: '',
      countdown: 60,
      isCountingDown: false,
      loginWidth: '40%',
      menulist: []
    };
  },
  computed: {
    countdownText() {
      return this.isCountingDown ? `${this.countdown}秒后重新获取` : '获取验证码';
    }
  },
  methods: {


    // 使用用户名登录
    loginWithUsername() {
      if (!this.username || !this.password) {
        this.$message.error('用户名和密码不能为空');
        return;
      }
      // 请求登录接口
      myaxios.post("user/login", {
        "userAccount": this.username,
        "userPassword": this.password
      }).then(res => {
        console.log("success", res)
        if (res.data.code === 0) {
          this.$message.success("登录成功")
          this.$router.push("/search")

          // next()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log("fail", err)
      })
      // 处理用户名登录逻辑
      console.log('用户名登录', this.username, this.password);
    },


    // 使用邮件登录
    loginWithEmail() {
      if (!this.email || !this.verificationCode) {
        this.$message.error('邮箱和验证码不能为空');
        return;
      }

      // 请求登录接口
      myaxios.post("user/loginphone", {
        username: this.email,
        code: this.verificationCode
      }).then(res => {
        console.log("success", res)
        if (res.data.code === 0) {
          this.$message.success("登录成功")
          this.getMenu()
          // sessionStorage.setItem("user", res.data.data.id)
          // this.$router.push("/")
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log("fail", err)
      })
      // 处理用户名登录逻辑
      console.log('用户名登录', this.username, this.password);
    },

    // 处理邮箱登录逻辑
    // console.log('邮箱登录', this.email, this.verificationCode);

    // 开始计时
    startCountdown() {
      // 先获取验证码，获取验证成功执行倒计时逻辑


      if (this.isCountingDown) return;

      this.isCountingDown = true;

      let urlSearchParams = new URLSearchParams;
      urlSearchParams.append("email", this.email)
      myaxios.post("user/code", urlSearchParams).then(res => {
        console.log("user/code success", res)

        if (res.data.code === 0) {
          this.$message.success("验证码发送成功");
        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log("user/code fail", err)
        this.$message.error("服务器繁忙，请重试");
      })
      // 改变按钮的状态
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
          this.isCountingDown = false;
        }
      }, 1000);
    },
    // 前往忘记密码页面
    toforgetpassword() {
      this.$router.push("/forget")
    }
  }
};
</script>

<style scoped>

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;

}

.login-container {

  /*width: 100%;*/
  background-color: #14345a;
  /*background: url("../assets/bg.jpg");*/
  background-size: cover;
  /*background-attachment:fixed;*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

}

.login {
  width: 40%;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  background-color: #fff;
}

.tabs {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
  margin-bottom: 10px;
}

/*.el-input,*/
.el-button {
  width: 100%;
  margin-bottom: 10px;
  /*height: ;*/
  padding: 12px 20px;

}

/*.el-form-item__content {*/
/*  display: flex;*/
/*  align-items: center;*/
/*}*/

.el-row {
  margin-bottom: 10px;
}

.el-col {
  margin-bottom: 10px;
}

</style>
